Highcharts এ Axes বা অক্ষ কনফিগারেশন অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি ডেটার সঠিক প্রদর্শন নিশ্চিত করে। আপনি custom intervals (কাস্টম ইন্টারভালস) এবং tick marks (টিক মার্কস) ব্যবহার করে অক্ষের শৈলী এবং স্কেল কাস্টমাইজ করতে পারেন। এই অপশনগুলো দিয়ে আপনি অক্ষের মান এবং সেগুলির মধ্যে ব্যবধান নির্ধারণ করতে পারবেন, যা চার্টের দৃশ্যমানতা এবং পড়তে সুবিধাজনক করে তোলে।
Custom Intervals (কাস্টম ইন্টারভালস)
Highcharts এ intervals কাস্টমাইজ করার মাধ্যমে আপনি অক্ষের মধ্যে ডেটা পয়েন্টগুলির মধ্যে ফাঁক বা ব্যবধান নিয়ন্ত্রণ করতে পারেন। এটি xAxis এবং yAxis উভয়ের জন্যই প্রযোজ্য। এর মাধ্যমে আপনি প্রতিটি টিক মার্কের মধ্যে ব্যবধান নির্ধারণ করতে পারেন, যেমন প্রতি ৫, ১০, ১৫ ইউনিট পর পর টিক মার্ক দেখা যাবে।
xAxis এবং yAxis Custom Intervals
xAxis এবং yAxis এর জন্য custom interval সেট করতে হলে, tickInterval প্রপার্টি ব্যবহার করতে হয়। এটি সাধারণত সংখ্যার মান হিসেবে ব্যবহৃত হয়।
উদাহরণ: xAxis Custom Interval
xAxis: {
tickInterval: 1, // প্রতি ১ ইউনিটে একটি টিক মার্ক
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
}
এখানে, xAxis এর tickInterval ১ সেট করা হয়েছে, অর্থাৎ প্রতি ১ ইউনিটে একটি টিক মার্ক দেখা যাবে।
উদাহরণ: yAxis Custom Interval
yAxis: {
tickInterval: 10, // প্রতি ১০ ইউনিটে একটি টিক মার্ক
title: {
text: 'Sales'
}
}
এখানে, yAxis এর tickInterval ১০ সেট করা হয়েছে, অর্থাৎ প্রতি ১০ ইউনিটে একটি টিক মার্ক দেখা যাবে। এটি ডেটার স্কেল এবং বিভাজন নিয়ন্ত্রণ করতে সহায়ক।
Tick Marks (টিক মার্কস)
Tick Marks হলো সেই ছোট চিহ্নগুলি, যা অক্ষের উপর প্রদর্শিত হয় এবং সাধারণত ডেটার ভ্যালু বা স্কেল চিহ্নিত করে। আপনি tick marks এর ধরন, আকার, এবং অবস্থান কাস্টমাইজ করতে পারেন। Highcharts এ দুই ধরনের tick marks ব্যবহার করা যায়:
- Major Tick Marks (মেজর টিক মার্কস): এগুলি মূল অক্ষের বৃহত্তম বা প্রধান টিক মার্ক।
- Minor Tick Marks (মাইনর টিক মার্কস): এগুলি ছোট এবং সূক্ষ্ম টিক মার্ক, যা মূল টিক মার্কগুলির মাঝে প্রদর্শিত হয়।
Major Tick Marks কাস্টমাইজেশন
xAxis: {
tickMarkPlacement: 'on', // মেজর টিক মার্ক মূল অক্ষের উপর
tickWidth: 2, // টিক মার্কের প্রস্থ
tickLength: 10, // টিক মার্কের দৈর্ঘ্য
lineWidth: 1 // অক্ষের প্রস্থ
}
এখানে, tickMarkPlacement দ্বারা টিক মার্কের অবস্থান নির্ধারণ করা হয়েছে (যেমন on, inside, বা outside), এবং tickWidth এবং tickLength দ্বারা টিক মার্কের আকার কাস্টমাইজ করা হয়েছে।
Minor Tick Marks কাস্টমাইজেশন
yAxis: {
minorTickInterval: 5, // মাইনর টিক মার্কের ইন্টারভাল
minorTickWidth: 1, // মাইনর টিক মার্কের প্রস্থ
minorTickLength: 5 // মাইনর টিক মার্কের দৈর্ঘ্য
}
এখানে, minorTickInterval দ্বারা মাইনর টিক মার্কের ইন্টারভাল নির্ধারণ করা হয়েছে, এবং minorTickWidth ও minorTickLength দ্বারা মাইনর টিক মার্কের আকার কাস্টমাইজ করা হয়েছে।
Tick Mark Placement (টিক মার্ক প্লেসমেন্ট)
Tick Mark Placement কাস্টমাইজ করে আপনি টিক মার্কগুলো কোথায় অবস্থান করবে তা নির্ধারণ করতে পারেন। আপনি 'on', 'inside', অথবা 'outside' অপশন ব্যবহার করে এটি কাস্টমাইজ করতে পারেন।
উদাহরণ: Tick Mark Placement
xAxis: {
tickMarkPlacement: 'outside' // টিক মার্ক বাইরে থাকবে
}
এখানে, tickMarkPlacement সেট করা হয়েছে 'outside', অর্থাৎ টিক মার্ক অক্ষের বাইরে প্রদর্শিত হবে।
Reverse Axis (রিভার্স অক্ষ)
Highcharts এ আপনি অক্ষের ডিরেকশনও পরিবর্তন করতে পারেন। এটি অক্ষের বিন্যাস রিভার্স করার জন্য ব্যবহৃত হয়। যেমন, আপনি yAxis এর জন্য reversed অপশন ব্যবহার করে অক্ষের মান উপরে বা নিচে সজ্জিত করতে পারেন।
উদাহরণ: Reverse Axis
yAxis: {
reversed: true, // Y অক্ষটি উল্টো হবে (উচ্চ মান নিচে এবং কম মান উপরে)
title: {
text: 'Value'
}
}
এখানে reversed সেট করা হয়েছে true, যার ফলে Y-Axis এর মান নিচে থেকে উপরে দেখা যাবে।
উপসংহার
Highcharts এর custom intervals এবং tick marks এর মাধ্যমে আপনি আপনার চার্টের অক্ষকে আরও স্পষ্ট এবং উপযুক্তভাবে কাস্টমাইজ করতে পারেন। tickInterval দ্বারা অক্ষের ব্যবধান নিয়ন্ত্রণ, এবং tick marks এবং tickMarkPlacement দ্বারা টিক মার্কের শৈলী ও অবস্থান নির্ধারণ করা সম্ভব। এর ফলে আপনি চার্টের ডিজাইন এবং ডেটার দৃশ্যমানতা আরও উন্নত করতে পারবেন।
Read more
